<template>
  <!--限时折扣的首页item -->
  <div class="c-ph24 c-pt40 c-pb40 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{flashSalesTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{flashSalesDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreFlashSales">更多</span>
    </div>
    <template v-if="flashSalesList && flashSalesList.length > 0">
      <div @click="goSales(index)" v-for="(item,index) in flashSalesList" :key="'s' + index">
        <div v-if="item.otherStatus != 1" class=" c-pt30 c-flex-row">
          <div class="c-ww260 c-maxh260 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover && (item.vipInfo.cover.coverType ==1 || item.vipInfo.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
            <div class="timeShow">距{{item.sales.status == 1 ? '开始：' : '结束：'}}
              <cj-clocker :time="clockerTimeFun(index, 'flashSalesList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'flashSalesList')">
              </cj-clocker>
            </div>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
            <div class="c-fs24 c-text-ellipsis2 c-lh32 c-mb30 c-wordBreakAll">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">限时{{Number(item.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">{{item.sales.tags==''?(Number(item.price) == 0 ? '限时免费' : '限时折扣'):item.sales.tags}}</span>{{'￥' | iosPriceFilter}}{{item.price}}</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="collageList && collageList.length > 0">
      <div @click="goCollage(index)" v-for="(item,index) in collageList" :key="'c' + index">
        <div v-if="item.otherStatus != 1" class=" c-pt30 c-flex-row">
          <div class="c-ww260 c-maxh260 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
            <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
            <div class="timeShow">距{{item.status == 1 ? '开始：' : '结束：'}}
              <cj-clocker :time="clockerTimeFun(index, 'collageList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'collageList')">
              </cj-clocker>
            </div>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
            <div class="c-fs24 c-text-ellipsis2 c-lh32 c-wordBreakAll">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">拼团</span>{{item.prodName}}
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">拼团价</span>{{'￥' | iosPriceFilter}}{{item.captainPriceType == 2 ? `${item.captainPrice}起` : item.captainPrice}}</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="friendHelperList && friendHelperList.length > 0">
      <div @click="clickGoTask(item)" class="c-pt30 c-flex-row" v-for="(item,index) in friendHelperList" :key="'f' + index">
        <div class="c-ww260 c-max260 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
          <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
          <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('@/assets/i/wap/course/vip.png'):require('@/assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('@/assets/defult270.png'))" alt=""/>
          <div class="timeShow">距{{item.status == 1 ? '开始：' : '结束：'}}
            <cj-clocker :time="clockerTimeFun(index, 'friendHelperList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'friendHelperList')">
            </cj-clocker>
          </div>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
          <div class="c-fs24 c-text-ellipsis2 c-lh32 c-wordBreakAll">
            <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-pv4 c-lh c-ph4 c-inlineblack c-vcAlign-middle">友情灌溉</span>{{item.name}}
          </div>
          <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
            <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">助力价</span>{{'￥' | iosPriceFilter}}0.00</div>
            <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
          </div>
        </div>
      </div>
    </template>
    <template v-if="bargainList && bargainList.length > 0">
      <div class=" c-pt30 c-flex-row" @click="clickGoBarginDetail(index)" v-for="(item, index) in bargainList" :key="'b' + index">
        <div class="c-ww260 c-maxh260 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
          <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
          <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
          <div class="timeShow">距{{item.status == 1 ? '开始：' : '结束：'}}
            <cj-clocker :time="clockerTimeFun(index, 'bargainList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'bargainList')">
            </cj-clocker>
          </div>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
          <div class="c-fs24 c-text-ellipsis2 c-lh32 c-wordBreakAll">
            <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">砍价购</span>{{item.name}}
          </div>
          <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
            <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">砍价享</span>{{'￥' | iosPriceFilter}}{{item.reservePrice}}</div>
            <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl10 c-mb1">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
          </div>
        </div>
      </div>
    </template>
  </div>

  <div class="c-ph24 c-pt40 c-pb20 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30 c-lh c-pl20 c-p"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{flashSalesTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{flashSalesDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreFlashSales">查看更多</span>
    </div>
    <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb20">
      <div @click="goSales(index)" v-if="flashSalesList && flashSalesList.length > 0 && item.otherStatus != 1" v-for="(item,index) in flashSalesList" :key="'s' + index">
        <div class="c-ww288 c-pt24">
          <div class="c-ww288 c-maxh288 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig'" :fontClass="{
              boxStyle: 'c-pt40 c-pb48 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-if="item.vipInfo && item.vipInfo.cover && (item.vipInfo.cover.coverType ==1 || item.vipInfo.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
            <div class="mb-timeShow">距{{item.sales.status == 1 ? '开始：' : '结束：'}}
              <cj-clocker :time="clockerTimeFun(index, 'flashSalesList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'clockerTimeFun')">
              </cj-clocker>
            </div>
          </div>
          <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll c-mb16 c-mt24">
            <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">限时{{Number(item.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}
          </div>
          <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
            <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">{{item.sales.tags==''?(Number(item.price) == 0 ? '限时免费' : '限时折扣'):item.sales.tags}}</span>{{'￥' | iosPriceFilter}}{{item.price}}</div>
            <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
          </div>
        </div>
      </div>
      <template v-if="collageList && collageList.length > 0">
        <div @click="goCollage(index)" v-for="(item,index) in collageList" :key="'c' + index">
          <div v-if="item.otherStatus != 1" class="c-ww288 c-pt24">
            <div class="c-ww288 c-maxh288 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
              <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :fontClass="{
                boxStyle: 'c-pt40 c-pb48 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs26'}" :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
              <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
              <div class="mb-timeShow">距{{item.status == 1 ? '开始：' : '结束：'}}
                <cj-clocker :time="clockerTimeFun(index, 'collageList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'clockerTimeFun')">
                </cj-clocker>
              </div>
            </div>
            <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll c-mb16 c-mt24">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">拼团</span>{{item.prodName}}
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">拼团价</span>{{'￥' | iosPriceFilter}}{{item.captainPriceType == 2 ? `${item.captainPrice}起` : item.captainPrice}}</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="friendHelperList && friendHelperList.length > 0">
        <div @click="clickGoTask(item)" class="c-ww288 c-pt24" v-for="(item,index) in friendHelperList" :key="'h' + index">
          <div class="c-ww288 c-maxh288 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
            <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :fontClass="{
              boxStyle: 'c-pt40 c-pb48 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs26'}" :content="{name: item.name, duration: item.duration, durationType: item.durationType}" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('@/assets/i/wap/course/vip.png'):require('@/assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('@/assets/defult270.png'))" alt=""/>
            <div class="mb-timeShow">距{{item.status == 1 ? '开始：' : '结束：'}}
              <cj-clocker :time="clockerTimeFun(index, 'friendHelperList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'friendHelperList')">
              </cj-clocker>
            </div>
          </div>
          <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll c-mb16 c-mt24">
            <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">友情灌溉</span>{{item.name}}
          </div>
          <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
            <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">助力价</span>{{'￥' | iosPriceFilter}}0.00</div>
            <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
          </div>
        </div>
      </template>
      <template v-if="bargainList && bargainList.length > 0">
        <div v-for="(item, index) in bargainList" :key="'b' + index">
          <div class="c-ww288 c-pt24" @click="clickGoBarginDetail(index)" v-if="item.otherStatus != 1">
            <div class="c-ww288 c-maxh288 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
              <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :fontClass="{
                boxStyle: 'c-pt40 c-pb48 c-pl12',
                name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                duration: 'c-fs26'}" :content="{name: item.name, duration: item.duration, durationType: item.durationType}" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
              <img v-else class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
              <div class="timeShow">距{{item.status == 1 ? '开始':'结束'}}
                <cj-clocker :time="clockerTimeFun(index, 'bargainList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'bargainList')">
                </cj-clocker>
              </div>
            </div>
            <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll c-mb16 c-mt24">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">砍价购</span>{{item.name}}
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">砍价享</span>{{'￥' | iosPriceFilter}}{{item.reservePrice}}</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl10 c-mb1">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>

  <div v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="flashSalesTitles" :titleDesc="flashSalesDesc" @clickMore="clickMoreFlashSales"></index-three-title-com>
    <div class="c-ph24 c-pb20 c-bd-b12-f5">
      <template v-if="flashSalesList && flashSalesList.length > 0">
        <div @click="goSales(index)" v-for="(item,index) in flashSalesList" :key="'s' + index">
          <div v-if="item.otherStatus != 1" class="c-flex-row c-pt24">
            <div class="c-pb24">
              <div class="c-ww210 c-maxh210 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
                <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover && (item.vipInfo.cover.coverType ==1 || item.vipInfo.cover.coverType ==2)" />
                <img v-else class="c-w100 imgCloseBig" :class="themeName == 'mb3' ? 'c-br10' : ''" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
                <div class="mb-timeShow">
                  <cj-clocker :time="clockerTimeFun(index, 'flashSalesList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'flashSalesList')">
                  </cj-clocker>
                </div>
              </div>
            </div>
            <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-pb24 c-justify-sb c-pb24" :class="(index == flashSalesList.length - 1) && (collageList.length == 0) && (friendHelperList.length == 0) && (bargainList.length == 0) ? '' : 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll">
                <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">限时{{Number(item.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}
              </div>
              <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
                <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">{{item.sales.tags==''?(Number(item.price) == 0 ? '限时免费' : '限时折扣'):item.sales.tags}}</span>{{'￥' | iosPriceFilter}}{{item.price}}</div>
                <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="collageList && collageList.length > 0">
        <div @click="goCollage(index)" v-for="(item,index) in collageList" :key="'c' + index">
          <div v-if="item.otherStatus != 1" class="c-flex-row c-pt24">
            <div class="c-pb24">
              <div class="c-ww210 c-maxh210 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
                <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
                <img v-else class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
                <div class="mb-timeShow">
                  <cj-clocker :time="clockerTimeFun(index, 'collageList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'collageList')">
                  </cj-clocker>
                </div>
              </div>
            </div>
            <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="(index == collageList.length - 1) && (friendHelperList.length == 0) && (bargainList.length == 0) ? '' : 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll">
                <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">拼团</span>{{item.prodName}}
              </div>
              <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
                <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">拼团价</span>{{'￥' | iosPriceFilter}}{{item.captainPriceType == 2 ? `${item.captainPrice}起` : item.captainPrice}}</div>
                <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="friendHelperList && friendHelperList.length > 0">
        <div @click="clickGoTask(item)" class="c-pt24 c-flex-row" v-for="(item,index) in friendHelperList" :key="'h' + index">
          <div class="c-pb24">
            <div class="c-ww210 c-maxh210 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
              <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
              <img v-else class="c-w100 imgCloseBig" :class="themeName == 'mb3' ? 'c-br10' : ''" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('@/assets/i/wap/course/vip.png'):require('@/assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('@/assets/defult270.png'))" alt=""/>
              <div class="mb-timeShow">
                <cj-clocker :time="clockerTimeFun(index, 'friendHelperList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'friendHelperList')">
                </cj-clocker>
              </div>
            </div>
          </div>
          <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="(index == friendHelperList.length - 1) && (bargainList.length == 0) ? '' : 'c-bd-b1'">
            <div class="c-fs24 c-text-ellipsis2 c-lh32 c-flex-row c-aligni-center">
              <span class="c-fs16 theme-bg c-fc-white c-mr4 c-textAlign-c c-br4 c-pv4 c-ph4">友情灌溉</span><span class="">{{item.name}}</span>
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">助力价</span>{{'￥' | iosPriceFilter}}0.00</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="bargainList && bargainList.length > 0">
        <div v-for="(item, index) in bargainList" :key="'b' + index">
          <div class="c-pt24 c-flex-row" v-if="item.otherStatus != 1" @click="clickGoBarginDetail(index)">
            <div class="c-pb24">
              <div class="c-ww210 c-maxh210 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br10">
                <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
                <img v-else class="c-w100 imgCloseBig" :class="themeName == 'mb3' ? 'c-br10' : ''" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
                <div class="mb-timeShow">
                  <cj-clocker :time="clockerTimeFun(index, 'bargainList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'bargainList')">
                  </cj-clocker>
                </div>
              </div>
            </div>
            <div class="c-ml20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pb24" :class="index == bargainList.length - 1 ? '' : 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-lh32  c-wordBreakAll">
                <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">砍价购</span>{{item.name}}
              </div>
              <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
                <div class="c-fs24 theme-fc">
                  <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">砍价享</span>{{'￥' | iosPriceFilter}}{{item.reservePrice}}</div>
                </div>
                <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl10 c-mb1">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>

  <div class="c-ph24 c-pt24 c-pb20 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{flashSalesTitles}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{flashSalesDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreFlashSales">更多特惠</span>
    </div>
    <template v-if="flashSalesList && flashSalesList.length > 0">
      <div @click="goSales(index)" v-for="(item,index) in flashSalesList" :key="'s' + index">
        <div v-if="item.otherStatus != 1" class="c-pt24 c-flex-row">
          <div class="c-ww160 c-maxh106 c-text-hidden">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'imgCloseBig c-br10'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover && (item.vipInfo.cover.coverType ==1 || item.vipInfo.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb" :class="(index == flashSalesList.length - 1) && (collageList.length == 0) && (friendHelperList.length == 0) ? '' : 'c-pb24 c-bd-b1'">
            <div class="c-fs24 c-text-ellipsis2 c-lh36 c-wordBreakAll">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">限时{{Number(item.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}
            </div>
            <div class="c-flex-row c-fs18 c-fc-gray">距{{item.sales.status == 1 ? '开始剩：' : '结束剩：'}}
              <cj-clocker :time="clockerTimeFun(index, 'flashSalesList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'flashSalesList')">
              </cj-clocker>
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs18 theme-fc c-mr4">{{item.sales.tags==''?(Number(item.price) == 0 ? '限时免费' : '限时折扣'):item.sales.tags}}<span class="c-fs22 c-flex-grow1 c-textAlign-r" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs24'"><span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}</span></div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl16">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="collageList && collageList.length > 0">
      <div @click="goCollage(index)" v-for="(item,index) in collageList" :key="'c' + index">
        <div v-if="item.otherStatus != 1" class="c-pt24 c-flex-row">
          <div class="c-ww160 c-maxh106 c-text-hidden">
            <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig c-br10'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb" :class="(index == collageList.length - 1) && (friendHelperList.length == 0) ? '' : 'c-pb24 c-bd-b1'">
            <div class="c-fs24 c-text-ellipsis2 c-lh36 c-wordBreakAll">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">拼团</span>{{item.prodName}}
            </div>
            <div class="c-flex-row c-fs18 c-fc-gray">距{{item.status == 1 ? '开始剩：' : '结束剩：'}}
              <cj-clocker :time="clockerTimeFun(index, 'collageList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'collageList')">
              </cj-clocker>
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs18 theme-fc c-mr4">拼团价<span class="c-fs22 c-flex-grow1 c-textAlign-r" :class="Number(item.captainPrice) == 0 ? 'c-fs22' : 'c-fs24'"><span v-if="Number(item.captainPrice) != 0">{{'￥' | iosPriceFilter}}</span>{{item.captainPriceType == 2 ? `${item.captainPrice}起` : item.captainPrice | moneyStr}}</span></div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl16">{{'￥' | iosPriceFilter}}{{Number(item.prodPrice).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="friendHelperList && friendHelperList.length > 0">
      <div @click="clickGoTask(item)" class="c-pt24 c-flex-row" v-for="(item,index) in friendHelperList" :key="'h' + index">
        <div class="c-ww160 c-maxh106 c-text-hidden">
          <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig c-br6'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
          <img v-else class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('@/assets/i/wap/course/vip.png'):require('@/assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('@/assets/defult270.png'))" alt=""/>
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb" :class="index == friendHelperList.length - 1 ? '' : 'c-pb24 c-bd-b1'">
          <div class="c-fs24 c-text-ellipsis2 c-lh36  c-wordBreakAll">
            <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">友情灌溉</span>{{item.name}}
          </div>
          <div class="c-flex-row c-fs18 c-fc-gray">距{{item.status == 1 ? '开始剩：' : '结束剩：'}}
            <cj-clocker :time="clockerTimeFun(index, 'friendHelperList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'friendHelperList')">
            </cj-clocker>
          </div>
          <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
            <div class="c-fs18 theme-fc c-mr4">助力价<span class="c-fs22 c-flex-grow1 c-textAlign-r" :class="Number(item.playersPrice) == 0 ? 'c-fs22' : 'c-fs24'"><span v-if="Number(item.playersPrice) != 0">{{'￥' | iosPriceFilter}}</span>0.00</span></div>
            <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl16">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
          </div>
        </div>
      </div>
    </template>
    <template v-if="bargainList && bargainList.length > 0">
      <div v-for="(item, index) in bargainList" :key="'b' + index">
        <div class="c-flex-row c-pv24" @click="clickGoBarginDetail(index)" v-if="item.otherStatus != 1">
          <div class="c-ww160 c-maxh106 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p c-br6">
            <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig c-br6'" :hasText="false" v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)" />
            <img v-else class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.cover ? item.cover : ((item.prodType == cfrom.collageVip || item.prodType == cfrom.vip) ? require('@/assets/i/wap/course/vip.png') : ((item.prodType == cfrom.collageSvip || item.prodType == cfrom.svip) ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))" alt=""/>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
            <div class="c-fs24 c-text-ellipsis2 c-lh32 c-wordBreakAll">
              <span class="c-fs16 theme-bg c-fc-white c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4 c-inlineblack c-vcAlign-middle">砍价购</span>{{item.name}}
            </div>
            <div class="c-flex-row c-fs18 c-fc-gray">距{{item.status == 1 ? '开始剩：': '结束剩：'}}
              <cj-clocker :time="clockerTimeFun(index, 'bargainList')" format="%D天%H时%M分%S秒" @on-finish="clockerFinishFun(index, 'bargainList')">
              </cj-clocker>
            </div>
            <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
              <div class="c-fs24 theme-fc">
                <div class="c-fs24 theme-fc c-pr10"><span class="c-fs18 c-mr4">砍价享</span>{{'￥' | iosPriceFilter}}{{item.reservePrice}}</div>
              </div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through c-pl16">{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>

</template>
<script>
import { utilJs } from "@/utils/common.js";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "ClockIndexCom",
  components: {
    VipCustomImg,
    indexThreeTitleCom
  },
  props: {
    isOnlySale: { // 限时购单独模块跟特惠专区的区分标识
      type: Boolean,
      default: false
    },
    uiStyleType: {
      type: Number,
      default: 1
    },
    flashSalesTitles: {
      type: String,
      default: '特惠专区',
    },
    flashSalesDesc: {
      type: String,
      default: '特惠专区',
    },
    collageList: {
      type: Array,
      default: () => []
    },
    flashSalesList: {
      type: Array,
      default: () => []
    },
    friendHelperList: {
      type: Array,
      default: () => []
    },
    bargainList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    flashShowCount: {
      type: Number,
      default: 1
    },
    collageShowCount: {
      type: Number,
      default: 1
    },
    taskShowCount: {
      type: Number,
      default: 1
    },
    bargainShowCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      cfrom: global.ckFrom
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clockerFinishFun(index, list) {
      let info = '';
      if (list == 'flashSalesList') {
        info = this.flashSalesList[index].sales;
      } else if (list == 'collageList') {
        info = this.collageList[index];
      } else if (list == 'friendHelperList') {
        info = this.friendHelperList[index];
      } else if (list == 'bargainList') {
        info = this.bargainList[index];
      }
      if (info) {
        info.status = info.status == 1 ? 2 : 3;
      }
    },
    clockerTimeFun(index, list) {
      let stime = 0;
      let etime = 0;
      let time = '';
      let status = 0;
      let nowTime = (new Date()).getTime();
      if (list == 'flashSalesList') {
        stime = utilJs.getTimeByDate(this.flashSalesList[index].sales.startTime);
        etime = utilJs.getTimeByDate(this.flashSalesList[index].sales.endTime);
      } else if (list == 'collageList') {
        stime = utilJs.getTimeByDate(this.collageList[index].startTime);
        etime = utilJs.getTimeByDate(this.collageList[index].endTime);
      } else if (list == 'friendHelperList') {
        stime = utilJs.getTimeByDate(this.friendHelperList[index].startAt);
        etime = utilJs.getTimeByDate(this.friendHelperList[index].endAt);
      } else if (list == 'bargainList') {
        stime = utilJs.getTimeByDate(this.bargainList[index].startTime);
        etime = utilJs.getTimeByDate(this.bargainList[index].endTime);
      }
      if (stime > nowTime) {
        status = 1
        time = stime;
      } else if (etime > nowTime) {
        status = 2;
        time = etime;
      } else {
        status = 3;
      }
      if (list == 'flashSalesList') {
        this.flashSalesList[index].sales.status = status;
      } else if (list == 'collageList') {
        this.collageList[index].status = status;
      } else if (list == 'friendHelperList') {
        this.friendHelperList[index].btnStatus = status;
      } else if (list == 'bargainList') {
        this.bargainList[index].status = status;
      }
      return time;
    },
    clickMoreFlashSales() {
      let toPath = `/homePage/flashSales/flashSalesList`;
      this.iosAppRouteChange(toPath);
    },
    goCollage: function (index) {
      let prodType = this.collageList[index].prodType;
      let prodId = this.collageList[index].prodType == this.cfrom.collageActivity || this.collageList[index].prodType == this.cfrom.activity ? this.collageList[index].activityId : this.collageList[index].prodId;
      let query = {}
      if (prodType == this.cfrom.collageVip || prodType == this.cfrom.collageSvip || prodType == this.cfrom.vip || prodType == this.cfrom.svip) {
        if (this.collageList[index].status < 3) {
          query.isCollage = true;
        } else {
          prodType = this.cfrom.vip;
        }
      }
      goDetails(this, this.collageList[index].prodType, prodId, query, this.collageList[index].courseType, 1);
    },
    goSales: function (index) {
      let prodType = this.flashSalesList[index].prodType;
      let prodId = this.flashSalesList[index].prodType == this.cfrom.flashSalesActivity || this.flashSalesList[index].prodType == this.cfrom.activity ? this.flashSalesList[index].activityId : this.flashSalesList[index].prodId;
      let query = {}
      if (prodType == this.cfrom.flashSalesVip || prodType == this.cfrom.flashSalesSvip || prodType == this.cfrom.vip || prodType == this.cfrom.svip) {
        if (this.flashSalesList[index].sales.status == 1 || this.flashSalesList[index].sales.status == 2) {
          query.isSales = true;
        } else {
          prodType = this.cfrom.vip;
        }
      }
      goDetails(this, this.flashSalesList[index].prodType, prodId, query, this.flashSalesList[index].courseType, 1);
    },
    clickGoTask: function (tItem) {
      let type = tItem.prodType;
      let prodId = tItem.prodId;
      // 跳转到对应的详情页面 好友灌溉接口约定的prodType  0视频，1音频，2图文，3课程，4专栏，5vip升级页面，6测评，7交互测评，8语音测评，9知识套餐，10打卡，11训练营 ，12社群，13约课，14直播，15电子书，16资料库
      // 将好友灌溉接口约定的prodType 转为 goDetails.js中typeToUrl的key值
      let typeArr = [5, 5, 5, 5, 9, 1, 11, 75, 77, 61, 41, 78, 10, 53, 51, 142, 8];
      type = typeArr[Number(type)];
      let query = {}
      if (type == global.ckFrom.vip && (tItem.btnStatus == 1 || tItem.btnStatus == 2)) {
        query.isFa = true;
        prodId = tItem.faId;
      }
      goDetails(this, type, prodId, query, (tItem.courseType || 0), 1);
    },
    clickGoBarginDetail(index) {
      let query = {}
      let prodId = this.bargainList[index].prodType == this.cfrom.activity ? this.bargainList[index].extraId : this.bargainList[index].prodId
      if ((this.bargainList[index].prodType == this.cfrom.vip || this.bargainList[index].prodType == this.cfrom.svip) && this.bargainList[index].status < 3) {
        query.isBargain = true;
      }
      goDetails(this, this.bargainList[index].prodType, prodId, query, (this.bargainList[index].courseType || 0), 1);
    },
  }
};
</script>

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}
.mb-timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  position: absolute;
  bottom: 0;
  left: 0;
}
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
</style>
